<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BASIC DRAG-AND-DROP DIVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
</script>
<style type="text/css">
	div
	{
		margin: 0px;
		padding: 0px;
	}
	.verticalgridline
	{
		padding-top: 27px;
	}
	.box, .handle
	{
		font-size: 14px;
		font-family: Arial, sans-serif;
		border: 1px solid #aaa;
	}

	/** For the element **/
	.box-small
	{
		float: left;
		padding: 0px;
		width: 100px;
		height: 62px;
		margin: 5px;
		border-width: thin;
		border-style: dashed;
		background-color: #f0f;
		z-index: 1;
	}
	
	.box-small p
	{
		color: #000;
		font-size: 12px;
		margin: 5px 5px 10px 5px;
		text-align: left;
		white-space: normal;
	}

	.box-small span
	{
		color: #000;
		font-size: 10px;
		margin: 5px 5px 10px 5px;
		text-align: left;
		white-space: normal;
	}

	.box
	{
		float: left;
		padding: 0px;
		width: 300px;
		height: 200px;
		margin: 5px;
		background-color: #eee;
		z-index: 1;
	}
	.handle
	{
		cursor: move;
		height: 14px;
		border-width: 0px 0px 1px 0px;
		background: #666;
		color: #eee;
		padding: 2px 6px;
		margin: 0px;
		display: block;
	}
	.box p
	{
		font-size: 12px;
		margin: 5px 5px 10px 5px;
		text-align: left;
		white-space: normal;
		/*background-color: #fff;*/
	}

	fieldset
	{
		width: 60px;
	}

	fieldset input
	{
		margin: 5px;
		background-color: black;
		color: white;
	}

	.different
	{
		width: 160px;
		height: 400px;
	}
</style>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? " https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost + " google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
var pageTracker = _gat._getTracker("UA-3115657-1");
pageTracker._initData();
pageTracker._trackVisit();
</script>
<script type="text/javascript" src="../ToolMan/core.js"></script>
<script type="text/javascript" src="../ToolMan/events.js"></script>
<script type="text/javascript" src="../ToolMan/css.js"></script>
<script type="text/javascript" src="../ToolMan/coordinates.js"></script>
<script type="text/javascript" src="../ToolMan/drag.js"></script>

<script type="text/javascript" src="../jsTool/core-ext.js"></script>
<script type="text/javascript" src="../jsTool/intersection-ext.js"></script>
<script type="text/javascript" src="../jsTool/drag2container-ext.js"></script>

<script language="JavaScript">
window.onload = function()
{
	// declare dependencies
	var drag2cs = Tool.drag2container();
	var drag = ToolMan.drag();
	var dragGroup = null;

	$ =
	{
		getById: function (id) { return document.getElementById(id); }
		// ...
	};

	// fetch item
	var item1 = $.getById('item1');
	var item2 = $.getById('item2');
	var item3 = $.getById('item3');
	var item4 = $.getById('item4');
	
	// give additional behaviours to (non-)containers
	var alpha = drag.createSimpleGroup ($.getById('alpha'), $.getById('handle0')); // container
	var beta = drag.createSimpleGroup ($.getById('beta'), $.getById('handle1')); // non-container
	var chi = drag.createSimpleGroup($.getById('chi'), $.getById('handlen'))

	/// syntax either so,
	//var item = drag2cs.makeItemContainable(item, [alpha.element, $.getById('gamma'), chi.element]);
	drag2cs.makeItemContainable(item1, [$.getById('gamma'), alpha.element, chi.element]);
	drag2cs.makeItemContainable(item2, [$.getById('delta'), beta.element,  chi.element]);
	drag2cs.makeItemContainable(item3, [$.getById('gamma'), beta.element,  chi.element]);
	drag2cs.makeItemContainable(item4, [$.getById('delta'), alpha.element, chi.element]);
	
	/// container within container within container ...
	var decrease = 0.9;
	var value_h = 100.0
	var value_w = 150.0
	var element = $.getById('c1');
	///drag2cs.makeItemContainable (element, [$.getById('c6')]);
	/// the above breaks if container sequence is not monotonous
	/// also if multiple layers of containers, they stick permanently
	/// I think the bubbling behaviour causes the last layer to go off
	/// thus dragging the children and all the children of all layers  
	drag.createSimpleGroup (element, element.getElementsByTagName('DIV')[0]);
	element.style["width"] = value_w + 'px';
	element.style["height"] = value_h + 'px';
	for (var i=2; i<=10; ++i)
	{
		value_h = Math.round(value_h * decrease);
		value_w = Math.round(value_w * decrease);
		element = $.getById('c' + i);
		element.style["width"] = value_w + 'px';
		element.style["height"] = value_h + 'px';
		var containers = new Array();
		for (var j=1; j<i; ++j)
			containers.push($.getById('c' + j));
		dragGroup = drag.createSimpleGroup (element, element.getElementsByTagName('DIV')[0]);
		drag2cs.makeItemContainable ( dragGroup, containers );
	}
} // end of window.onload
</script>
</head>
<body>

<!--
<fieldset>
	<legend>Active container</legend>
	<input id="test1" type="text"/>
</fieldset>
<fieldset>
	<legend>Message received by item</legend>
	<input id="test2" type="text"/>
</fieldset>
<fieldset>
	<legend>Intersection?</legend>
	<input id="test3" type="text"/>
</fieldset>
-->

<div>
	<div id="item1" class="box-small">
		<p>Item 1</p>
		<p>Alpha, Gamma</p>
	</div>

	<div id="item4" class="box-small">
		<p>Item 4</p>
		<p>Alpha, Delta</p>
	</div>

	<br style="clear: left" />

	<div id="alpha" class="box">
		<b id="handle0" class="handle">Drag</b>
		<p>Alpha</p>
		&nbsp;
		<div id="item2" class="box-small">
			<p>Item 2</p>
			<p>Beta, Delta</p>
		</div>
	</div>
	<div id="beta" class="box">
		<b id="handle1" class="handle">Drag</b>
		<p>Beta</p>
		&nbsp;
		<div id="item3" class="box-small">
			<p>Item 3</p>
			<p>Beta, Gamma</p>
		</div>
	</div>

	<div id="gamma" class="box">
		<b id="handle2" class="handle">&nbsp;</b>
		<p>Gamma</p>
		&nbsp;
	</div>

	<div id="delta" class="box">
		<b id="handle3" class="handle">&nbsp;</b>
		<p>Delta</p>
		&nbsp;
	</div>

	<div id="chi" class="box different">
		<b id="handlen" class="handle">Drag</b>
	</div>


	<br style="clear: left" />	
	
	<div id="c1" class="box"><b class="handle">Drag</b><p>c1</p></div>
	<div id="c2" class="box"><b class="handle">Drag</b><p>c2</p></div>
	<div id="c3" class="box"><b class="handle">Drag</b><p>c3</p></div>
	<div id="c4" class="box"><b class="handle">Drag</b><p>c4</p></div>
	<div id="c5" class="box"><b class="handle">Drag</b><p>c5</p></div>
	<div id="c6" class="box"><b class="handle">Drag</b><p>c6</p></div>
	<div id="c7" class="box"><b class="handle">Drag</b><p>c7</p></div>
	<div id="c8" class="box"><b class="handle">Drag</b><p>c8</p></div>
	<div id="c9" class="box"><b class="handle">Drag</b><p>c9</p></div>
	<div id="c10" class="box"><b class="handle">Drag</b><p>c10</p></div>
</div>
</body>
</html>
